<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>风向分布</title>
		<link rel="stylesheet" href="css/index.css" />
		<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript" src="js/index.js" ></script>
		<script type="text/javascript" src="js/echarts.min.js" ></script>
	</head>

	<body>
		<div id="app">
			<el-row >
				<el-col :span="12">
					<div  id="myChart" :style="{width:'100%',height:'400px'}"></div>
				</el-col>
			</el-row>
			
		</div>
		<script>
			new Vue({
				el:'#app',
				data:function(){
					return{
						
					}
				},
				mounted:function(){
					var myChart = echarts.init(document.getElementById('myChart'));
					var option = {
						title : {
								text: '风向玫瑰图',
								x:'center'
						},
						tooltip : {
								trigger: 'item',
								formatter: "{a}:{c}%"
								//formatter: "{a} <br/>{b} : {c} ({d}%)"
						},
						legend: {
								x : 'center',
								y : 'bottom',
						},
						toolbox: {
						},
						series : [
								{
										name:'概率：',
										type:'pie',
										radius : [5, 110],
										center : ['75%', '50%'],
										roseType : 'area',
										color:['#409EFF'],
										itemStyle : {
                        normal: {
                            label: {                 //指示到模块的标签文字
                                show: true,
                                color:'black',
                                //formatter: '{b} : {c} \n ({d}%)'
                            },
//                             labelLine: {             //指示到模块的标签线
//                                 show: true,
//  
//                             }
                        },
                    },
										//selectedMode: 'single',
										data:[
												{value:30, name:'0°'},
												{value:15, name:'22.5°'},
												{value:15, name:'45°'},
												{value:25, name:'67.5°'},
												{value:20, name:'90°'},
												{value:35, name:'112.5°'},
												{value:30, name:'135°'},
												{value:40, name:'157.5°'},
												{value:10, name:'180°'},
												{value:40, name:'202.5°'},
												{value:20, name:'225°'},
												{value:40, name:'247.5°'},
												{value:30, name:'270°'},
												{value:40, name:'292.5°'},
												{value:40, name:'315°'},
												{value:40, name:'337.5°'},
												
// 												{value:'1%', name:'0'},
// 												{value:'1%', name:'22.5'},
// 												{value:'1%', name:'45'},
// 												{value:'1%', name:'67.5'},
// 												{value:'1%', name:'90'},
// 												{value:'1%', name:'112.5'},
// 												{value:'1%', name:'135'},
// 												{value:'1%', name:'157.5'},
// 												{value:'1%', name:'180'},
// 												{value:'1%', name:'202.5'},
// 												{value:'1%', name:'225'},
// 												{value:'1%', name:'247.5'},
// 												{value:'1%', name:'270'},
// 												{value:'1%', name:'292.5'},
// 												{value:'1%', name:'315'},
// 												{value:'1%', name:'337.5'}
										],
										
								}
						]
				};
		
				    myChart.setOption(option)
				}
			})
		</script>
	</body>

</html>